<div class="page-header">
  <h1>Details for the consumer group </strong>{{group}}</strong></h1>
</div>

<ol class="breadcrumb">
  <li><a href="#/">Groups List</a></li>
  <li class="active">{{group}}</li>
</ol>

<div class="alert alert-info" ng-show="loading">
  Loading ...
</div>

<div ng-hide="loading">
  <h2>Brokers</h2>

  <table class="table">
	<thead>
      <tr>
		<th>id</th>
		<th>host</th>
		<th>port</th>
      </tr>
	</thead>
	<tbody>
      <tr ng-repeat="b in info.brokers">
		<td>{{b.id}}</td>
		<td>{{b.host}}</td>
		<td>{{b.port}}</td>
      </tr>
	</tbody>
  </table>

  <hr/>

  <h2>Consumer Offsets</h2>

  <table class="table">
	<thead>
      <tr>
		<th>Topic</th>
		<th>Partition</th>
		<th>Offset</th>
		<th>logSize</th>
		<th>Lag</th>
		<th>Owner</th>
		<th>Created</th>
		<th>Last Seen</th>
      </tr>
	</thead>
	<tbody ng-repeat="c in info.offsets">
	  <tr class="topic-row">
		<td><a href="#/group/{{c.group}}/{{c.topic}}">{{c.topic}}</a></td>
		<td></td>
		<td>{{c.offset}}</td>
		<td>{{c.logSize}}</td>
		<td>{{c.logSize - c.offset}}</td>
		<td></td>
		<td></td>
		<td></td>
	  </tr>
	  <tr class="partition-row" ng-repeat="p in c.partitions">
		<td></td>
		<td>{{p.partition}}</td>
		<td>{{p.offset}}</td>
		<td>{{p.logSize}}</td>
		<td>{{p.logSize - p.offset}}</td>
		<td>{{p.owner}}</td>
		<td><moment timestamp="{{p.creation}}"></moment></td>
		<td><moment timestamp="{{p.modified}}"></moment></td>
	  </tr>
	</tbody>
  </table>
</div>
